<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<html>
<head>
	<title></title>

</head>
<body>

   
   <div>

    <p id="position"></p> <button onclick="getLocation()">获得地理位置</button> <br/>

   	选择图片 <br/>
   	<input type="file" name="pic" id="pic" accept="image/*"  onchange="onFileChange()" />
   </div>
   
   <script type="text/javascript">
   	    var x=document.getElementById("position");
        function onFileChange(){
        	alert(document.getElementById("pic").value);
        }

        function getLocation() {
           if (navigator.geolocation){

             navigator.geolocation.getCurrentPosition(showPosition,showError);
            }
         else{
         	x.innerHTML="Geolocation is not supported by this browser.";
         }
        }
        function showPosition(position){

          x.innerHTML="Latitude: " + position.coords.latitude + 
           "<br />Longitude: " + position.coords.longitude;	+
            "<br />Accuracy: " + position.coords.accuracy;	
        }

        function showError(error){
            switch(error.code) 
          {
		    case error.PERMISSION_DENIED:
		      x.innerHTML="User denied the request for Geolocation."
		      break;
		    case error.POSITION_UNAVAILABLE:
		      x.innerHTML="Location information is unavailable."
		      break;
		    case error.TIMEOUT:
		      x.innerHTML="The request to get user location timed out."
		      break;
		    case error.UNKNOWN_ERROR:
		      x.innerHTML="An unknown error occurred."
		      break;
          }
        }
   </script>
</body>
</html>